import { useState } from "react";
//超级社团
import React from 'react'
import Article from "../Article/Article";
import Carousel from "../Carousel/Carousel";
import jsonClubPublicize from "../../axios/ClubPublicize.json";

export default function SuperClub() {
    const clubPublicize = jsonClubPublicize.data
    const [show, setshow] = useState(false);
    return (
        <div className="SuperClub">

            <div className="container text-dark shadow-sm p-3 mb-5 bg-white rounded" >
                <div class="row">
                    <div className="container text-center row ">
                        <div className="col col-lg-2" >
                            <h4 className="list-group-item list-group-item-action " style={{ cursor: "pointer" }}
                                onClick={() => { setshow(!show) }}>我的社团</h4>
                            <div className={show ? "dropdown-menu show" : "dropdown-menu"} style={{ float: "left" }}>
                                <a className="dropdown-item" href="#">加入的社团</a>
                                <a className="dropdown-item" href="#">更多社团</a>
                            </div>
                        </div>
                        <div className="col-md-auto"> {/* 可变宽度内容 */}
                            <input className="form-control " type="search" placeholder="请输入12位社团号搜索" aria-label="Search" />
                        </div>
                        <div className="col col-lg-2">
                            <button className="btn btn-outline-success my-2 my-sm-0" type="submit" style={{ height: "50" }}>搜索</button>
                        </div>
                    </div >
                    <hr></hr>
                    <div class="col" >
                        <span style={{ float: "left" }}> 热门社团</span>
                    </div>
                    <div class="col" >
                        <span style={{ float: "right" }}>更多{">"}</span>
                    </div>
                </div>
                <div class="row">
                    {clubPublicize.map((item, index) => {
                        return <div class="col h4" style={{ padding: 1 }}>
                            <img className="d-block w-100 rounded" style={{ height: 170 }} src={item.imgUrl} alt={`Slide ${index}`} />
                            <hr />社团名称：{item.clubName}
                        </div>
                    })}
                </div>
            </div>
            <div>
                <Carousel flag="true" />
                {/* 文章页面 */}
                <Article jsonUrl='ArticleSuperClub' flag="true" />
            </div>
        </div>
    )
}
